import React, {Component} from 'react'
import History from '../components/History'
import Result from '../components/Result'
export default class Search extends Component {
    constructor(props){
        super(props);
        this.state = {
            searchKeyowrd:'',
            history:[]
        }
    }
    
    componentWillMount(){
        let history = JSON.parse(localStorage.getItem('searchKeyowrd'))
        this.setState({
            history:history
        })
    }

    handleChangeSearchKeyword(e){
        this.setState({
            searchKeyowrd:e.target.value
        })
    }

    handleSearch(){
        const { searchKeyowrd } = this.state
        if(!searchKeyowrd) {
            alert('请输入书名，以供搜索')
            return
        }
        let searchHistory = []

        if(localStorage.getItem('searchKeyowrd')){
            searchHistory = JSON.parse(localStorage.getItem('searchKeyowrd'))
            searchHistory.push(searchKeyowrd)
        } else {
            searchHistory.push(searchKeyowrd)
        }
        localStorage.setItem('searchKeyowrd',JSON.stringify(Array.from(new Set(searchHistory))))

        if(this.props.onSearch){
            this.props.onSearch(searchKeyowrd)
        }
        this.setState({
            history:JSON.parse(localStorage.getItem('searchKeyowrd')),
            searchKeyowrd:searchKeyowrd
        })
    }

    handleHistoryKeyword(keyword){
        this.setState({
            searchKeyowrd:keyword
        })
    }

    render(){
        const searchResult = this.props.searchResult.list
        return (
            <div className="searchInput">
                <header>
                    {this.state.searchKeyowrd?`跟"${this.state.searchKeyowrd}"有关的书籍`:'西瓜大侠'}
                </header>
                <main>
                    <div className="inputWrap">
                        <input 
                            value={this.state.searchKeyowrd}
                            onChange={this.handleChangeSearchKeyword.bind(this)}
                            className='form-control' 
                            type="text" 
                            placeholder='请输入书名'/>
                        <i 
                            className="fa fa-search" 
                            aria-hidden="true"></i>

                        <button 
                            onClick={this.handleSearch.bind(this)}
                            className='btnSearch'>搜索</button>
                    </div>
                    <History
                        handleHistoryKeyword={this.handleHistoryKeyword.bind(this)}
                        onSearch={this.props.onSearch}
                        history={this.state.history}/>
                    <div className="searchResultList">
                        {searchResult.length>0 && 
                            <p className='searchResultIntro'>搜索结果</p>}
                        {searchResult.map((book)=>{
                            return(
                                <Result
                                    key={book._id}
                                    book={book}/>
                            )
                        })}
                    </div>
                </main>
            </div>
        )
    }
}